import {reactive, ref, defineComponent} from "vue";
import {ElMessageBox, ElMessage, ElDialog, ElButton} from 'element-plus'

export default defineComponent({
    setup() {
        let state = reactive({
            title: 'vae',
            dialogVisible: false
        })
        let handleClose = () => {
            state.dialogVisible = false
            console.log('=-')
            console.log(state.dialogVisible)
        }
        let open = () => {
            state.dialogVisible = true
            console.log(state)
        }
        let ly = reactive([
            {label: 'v1', type: 'primary'},
            {label: 'v2', type: 'success'},
            {label: 'v3', type: 'info'},
        ])
        let click = (item) => {
            console.log(item)
            ElMessageBox.alert('This is a message', 'Title', {
                confirmButtonText: 'OK',
                callback: (action) => {
                    ElMessage({
                        type: 'info',
                        message: `action: ${action}`,
                    })
                },
            })
        }
        let list = ly.map(item => {
            return (<el-button type={item.type} onClick={() => click(item)}>{item.label}</el-button>)
        })
        return ()=> (
            <div>
                {list}
                <el-button onClick={open}>弹出{state.dialogVisible}</el-button>
                <ElDialog
                    model-value={state.dialogVisible}
                    title="Tips"
                    width="60%"
                    append-to-body={true}
                >
                    <div slot="foot">
                        <el-button onClick={handleClose}>cc</el-button>
                    </div>
                </ElDialog>
            </div>

        )
    }

})